<template>
  <div class="registerContainer">
    <div class="backgroundImg">
      <img class="bigImg" src="./image/banner1.jpg" alt="" />
      <div class="form">
        <el-form :model="ruleRegister"  ref="ruleform">
          <el-form-item
            label="60s完成注册，幸福一辈子"
            label-width="320px"
            style="fontsize: 20px"
          ></el-form-item>
          <el-form-item>
            <h1
              class="outline"
              label-width="320px"
              style="width: 430px; height: 2px; background: #fff"
            ></h1>
          </el-form-item>
          <el-form-item label="我的性别：" prop="sex">
            <el-radio v-model="ruleRegister.sex" label="1">男</el-radio>
            <el-radio v-model="ruleRegister.sex" label="2">女</el-radio>
          </el-form-item>
          <el-form-item label="出生日期：" prop="timer">
            <div class="block">
              <el-date-picker
                v-model="ruleRegister.timer"
                type="datetime"
                placeholder="请选择出生日期"
                default-time="12:00:00"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="工作地区：" prop="area" class="formItem">
            <el-row>
              <el-col :span="5">
                <el-select
                  v-model="ruleRegister.options.province"
                  filterable
                  placeholder="选择省"
                >
                  <el-option
                    :value="province.name"
                    :label="province.name"
                    v-for="province in cityList"
                    :key="province.code"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="5" :offset="1" v-if="isProvince">
                <el-select
                  v-model="ruleRegister.options.city"
                  placeholder="选择市"
                >
                  <el-option
                    :value="city.name"
                    :label="city.name"
                    v-for="city in cityItem.subLevelModelList"
                    :key="city.name"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="5" :offset="1"  >
                <el-select
                  v-model="ruleRegister.options.qu"
                  placeholder="选择区"
                >
                  <el-option
                  :value="subLevel.name"
                  :label="subLevel.name"
                  v-for="subLevel in subLevelModelList"
                  :key="subLevel.name"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="婚姻状况：" prop="marriage">
            <el-radio v-model="ruleRegister.marriage" label="1">未婚</el-radio>
            <el-radio v-model="ruleRegister.marriage" label="2">已婚</el-radio>
            <el-radio v-model="ruleRegister.marriage" label="3">丧偶</el-radio>
          </el-form-item>
          <el-form-item label-width="30px">
            <el-button
              @click="submitForm"
              style="
                width: 380px;
                height: 50px;
                background: linear-gradient(-135deg, #856df1, #a468ef);
              "
              >免费注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="brand" style="display: flex; justify-content: space-around">
      <div class="brandItem">
        <img src="./image/brand1.png" alt="" />
        <h4>专注16年</h4>
        <p>珍爱网创始于2005年，专注婚恋16年，经验丰富</p>
      </div>
      <div class="brandItem">
        <img src="./image/brand2.png" alt="" />
        <h4>注册破2亿</h4>
        <p>珍爱网创始于2005年，专注婚恋16年，经验丰富</p>
      </div>
      <div class="brandItem">
        <img src="./image/brand3.png" alt="" />
        <h4>5000位专业红娘</h4>
        <p>珍爱网创始于2005年，专注婚恋16年，经验丰富</p>
      </div>
      <div class="brandItem">
        <img src="./image/brand4.png" alt="" />
        <h4>品牌第一</h4>
        <p>珍爱网创始于2005年，专注婚恋16年，经验丰富</p>
      </div>
      <div class="brandItem">
        <img src="./image/brand5.png" alt="" />
        <h4>50家门店</h4>
        <p>珍爱网创始于2005年，专注婚恋16年，经验丰富</p>
      </div>
    </div>
    <div class="bigImg1">
      <img src="./image/banner2.jpg" alt="" />
    </div>
    <div class="header" :class="flag ? 'active' : ''">
      <div class="header_img">
        <img src="./image/logo.png" alt="" />
      </div>
      <button class="header_btn" @click="toLogin">登录</button>
    </div> 
  </div>
</template>

<script>
// import func from 'vue-editor-bridge';
/* import {Message} from 'element-ui';
import Vue from 'vue'
Vue.use(Message) */
import { mapActions, mapGetters } from "vuex";
export default {
  name: "Register",
  computed: {
    ...mapGetters(["hotCityList", "cityList"]) ,
    isProvince:function(){
      if(this.cityItem.name){
        console.log(this.cityItem);
         if(this.cityItem.name === this.cityItem.subLevelModelList[0].name ) {
        return false
         }else{
           return true
         }
      }else{
          return true
      }
  }
  },
  watch: {
    /* ruleRegister:{
      handler: () => {
          console.log(123)
        },
        subLevelModelList[0].name
        subLevelModelList[0].name
        deep:true   比较消耗性能
    } */
    "ruleRegister.options.province": {
      handler: function (e) {
        console.log(e, this)
        this.ruleRegister.options.city = ''
        this.ruleRegister.options.qu = ''
        this.subLevelModelList=[]
        this.cityItem = this.cityList.find((item) => {
          console.log(item);
          return item.name === e
        });
        console.log(this.cityItem);
        this.subLevelModelList = this.cityItem.subLevelModelList[0].subLevelModelList
      },
       "ruleRegister.options.city":{
         handler1:function(e){
          //  this.subLevelModelList = this.cityItem.subLevelModelList[0].subLevelModelList
          console.log(e);
         }
       }
    },
  },
  data() {
    return {
      flag: false,
      cityItem: {},
      subLevelModelList:[],
      ruleRegister: {
        timer: "",
        sex: "1",
        marriage: "1",
        options: {
          province: "",
          city: "",
          qu: "",
        },
      },
    };
  },

  methods: {
    ...mapActions(["getCityList"]),
    submitForm() {
      const {timer,options:{province,qu}} = this.ruleRegister
      console.log(this);
        if(!province ||!qu) {this.$message({
          message: '亲，请输入完整的地址',
          type: 'warning'
        });
        return
       }
        if(!timer) {this.$message({
          message: '亲，时间还未输入哦',
          type: 'warning'
        });
        return
       }
      this.$router.push('/edit')
    },
    handleScroll(e) {
      if (e.target.scrollingElement) {
        if (e.target.scrollingElement.scrollTop > 5) {
          this.flag = true;
        } else {
          this.flag = false;
        }
      }

      /* console.log(e.target.scrollingElement.scrollTop,e) */
    },
    handleChange() {},
    handleClick(e) {
      // console.log(e.target.textContent, this.$refs.sf.textContent);
      const { textContent } = e.target;
      if (textContent === this.$refs.sf.textContent) {
        return;
      }
      const entirContry = this.cityList.find(
        (item) => item.name === e.target.textContent
      );

      if (entirContry.name === entirContry.subLevelModelList[0].name) {
        this.isTrue = false;
        this.qu = entirContry.subLevelModelList[0].subLevelModelList;
      } else {
        this.isTrue = true;
        this.qu = [];
      }
      this.$refs.sf.textContent = e.target.textContent;
      this.city = entirContry.subLevelModelList;
      this.$refs.shi.textContent = "";
      this.$refs.qu.textContent = "";
    },
    handleCity(e) {
      this.$refs.shi.textContent = e.target.textContent;
      this.qu = this.city.find(
        (item) => item.name === e.target.textContent
      ).subLevelModelList;
    },
    toLogin() {
      this.$router.push({
        path: "/login",
      });
    },
  },
  async mounted() {
    window.addEventListener("scroll", this.handleScroll);
    await this.getCityList();
    // console.log(this.hotCityList);
     if(window.localStorage.getItem('cookie')){
       window.localStorage.removeItem('cookie')
     }
  },
}
</script>

<style lang="stylus" scoped>
.registerNav
  width 100%
  background red
.header
  position fixed
  top 0
  left 0
  box-sizing border-box
  width 100%
  height 80px
  display flex
  align-items center
  padding 0 180px
  justify-content space-between
  &.active
    background #996EF0
  .header_img
    width 130px
    height 68px
  .header_btn
    width 80px
    height 36px
    color #000
    font-size 14px
    padding 0 20px
    outline none
    border 1px solid rgb(255, 255, 255)
    height 36px
    line-height 34px
    background transparent
    filter none !important
.backgroundImg
  position relative
  box-sizing border-box
  width 100%
  overflow hidden
  .bigImg
    height 690px
    min-width 1200px
    animation bgBrans linear 1.2s 0.3s
    animation-fill-mode forwards
  @keyframes bgBrans
    100%
      transform scale(1.1)
.brand
  padding-top 40px
  .brandItem
    display flex
    flex-direction column
    align-items center
    h4
      font-size 20px
      padding 0 0 8px
    p
      font-size 14px
      color #999
      width 200px
      height 40px
.bigImg1
  padding-top 50px
  width 100%
  img
    width 100%
.city
  // position relative
  width 90px
  height 36px
  background #fff
  text-align right
  background #FFFFFF40
  color #fff
  padding-right 10px
  .sf
    position absolute
    top 0
    left 130px
    width 50px
    height 5px
  .shi
    position absolute
    top 0
    left 230px
    width 50px
    height 5px
  .qu
    position absolute
    top 0
    left 340px
    width 50px
    height 5px
.formItem
  position relative
.area
  position absolute
  top 35px
  left 115px
  display none
  width 390px
  // height:250px
  background #fff
  opcity 0.7
  color #000
  z-index 99
  padding 0 15px
  h3
    text-align left
    span
      padding 0 15px
      font-size 16px
  .provinceList
    display flex
    flex-wrap wrap
    text-align left
    padding 0 15px
    .provinceItem
      font-size 16px
      width 20%
.city:hover .area
  display block
.el-form
    position absolute
    top 100px
    right 200px
    width 440px
    height 436px
    background #000
    padding 0 30px
    opacity 0.7
    box-shadow 0px 2px 11px 0px rgb(0 0 0 / 50%)
.el-form-item__label
    font-size 18px!important
    color #fff!important
.el-cascader
    margin 0 10px
</style>
